<template>
  <div class="gridRoot" :style="{ width: `${width}px`, height: `${height}px`, borderColor: `${color}` }">
    <!-- 竖线 -->
    <div
      class="colLine"
      v-for="c in colCount"
      :key="c"
      :style="{ left: `${(c - 1) * size}px`, backgroundColor: `${color}` }"
    ></div>

    <!-- 横线 -->
    <div
      class="rowLine"
      v-for="r in rowCount"
      :key="r"
      :style="{ top: `${(r - 1) * size}px`, backgroundColor: `${color}` }"
    ></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";

export default defineComponent({
  name: "Grid",

  props: {
    width: {
      type: Number,
      default: 375,
    },
    height: {
      type: Number,
      default: 667,
    },
    size: {
      type: Number,
      default: 5,
    },
    color: {
      type: String,
      default: "lightblue",
    },
  },

  setup(props) {
    let colCount = computed(() => {
      // console.log("colCount---->", Math.floor(props.width / props.size));
      return Math.floor(props.width / props.size) + 1;
    });

    let rowCount = computed(() => {
      // console.log("rowCount---->", Math.floor(props.height / props.size));
      return Math.floor(props.height / props.size) + 1;
    });

    return {
      colCount,
      rowCount,
    };
  },
});
</script>

<style lang="scss" scoped>
.gridRoot {
  position: absolute;
  left: 40px;
  top: 40px;
  right: 0;
  bottom: 0;
  border-right: solid 1px #f2f2f2;
}

.colLine {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
}

.rowLine {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
}
</style>
